<template>
  <view class="main">
    <view :style="{ height: statusBarHeight + 'rpx' }"></view>
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="back-btn" @click="goBack">
          <image src="/static/images/newIndex/back.png"></image>
        </view>
        <view class="title">新增研究中心</view>
      </view>
    </view>
    <view class="mainBg"></view>
    <view class="main-container">
      <view class="inputCon">
        <view>研究中心名称</view>
        <input
          v-model="hospitalInfo.name"
          type="text"
          placeholder="输入研究中心名称"
          placeholder-style="color: #CCD1D8; font-size: 30rpx;"
        />
      </view>
      <view class="inputCon">
        <view>研究中心编码</view>
        <input
          v-model="hospitalInfo.code"
          type="text"
          placeholder="输入研究中心编码"
          placeholder-style="color: #CCD1D8;"
        />
      </view>
      <view class="inputCon">
        <view>主演研究者</view>
        <input
          v-model="hospitalInfo.principle_nvestigator"
          type="text"
          placeholder="输入主演研究者"
          placeholder-style="color: #CCD1D8;"
        />
      </view>
      <view class="inputCon">
        <view>联系电话</view>
        <input
          v-model="hospitalInfo.phone"
          type="text"
          placeholder="输入联系电话"
          placeholder-style="color: #CCD1D8;"
        />
      </view>
      <view class="inputCon" style="justify-content: space-between">
        <view>logo</view>
        <tui-upload
          :value="hospitalInfo.image"
          :header="uploaderHeader"
          :limit="1"
          :serverUrl="fileUploadServerUrl"
          @complete="imageComplete"
          @remove="imageRemove"
          style="transform: scale(0.8)"
        ></tui-upload>
      </view>
    </view>
    <view class="main-container">
      <view class="inputCon" style="justify-content: space-between">
        <view>状态 (隐藏/正常)</view>
        <tui-switch
          style="text-align: right"
          @change="statusChange"
          :checked="hospitalInfo.status == 'normal'"
        ></tui-switch>
      </view>
    </view>

    <tui-list-cell class="foot-ope">
      <tui-form-button @click="save()" height="2.6" radius="50px"
        >确定</tui-form-button
      >
    </tui-list-cell>

    <tui-toast ref="toast"></tui-toast>
  </view>
</template>

<script>
import tuiLabel from "@/components/thorui/tui-label/tui-label.vue";
import tuiInput from "@/components/thorui/tui-input/tui-input.vue";
import tuiFormButton from "@/components/thorui/tui-form-button/tui-form-button.vue";
import tuiTextarea from "@/components/thorui/tui-textarea/tui-textarea.vue";
import tuiCheckbox from "@/components/thorui/tui-checkbox/tui-checkbox.vue";
import tuiCheckboxGroup from "@/components/thorui/tui-checkbox-group/tui-checkbox-group.vue";
import tuiUpload from "@/components/thorui/tui-upload/tui-upload";
import config from "../../common/config";

export default {
  components: {
    tuiInput,
    tuiFormButton,
    tuiTextarea,
    tuiCheckbox,
    tuiCheckboxGroup,
    tuiLabel,
    tuiUpload,
  },
  data() {
    return {
      statusBarHeight: 0,
      hospitalInfo: {},

      uploaderHeader: {
        Authorization: `${uni.getStorageSync("thorui_token")}`,
      },
      fileUploadServerUrl: config.baseUrl + "/api/ajax/upload",

      status: false,
    };
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    imageRemove(e) {
      this.hospitalInfo.image = [];
    },
    imageComplete(e) {
      this.hospitalInfo.image = e.imgArr;
    },

    statusChange(e) {
      if (e.detail.value == false) {
        this.hospitalInfo.status = "hidden";
      } else {
        this.hospitalInfo.status = "normal";
      }
    },

    save() {
      this.http
        .post("/api/hospital/add", {
          data: this.hospitalInfo,
        })
        .then((res) => {
          if (res.data.code == 1) {
            let params = {
              title: res.data.msg,
              imgUrl: "/static/images/toast/check-circle.png",
              icon: true,
            };
            this.$refs.toast && this.$refs.toast.show(params);

            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          } else {
            let params = {
              title: res.data.msg,
              imgUrl: "/static/images/toast/fail-circle.png",
              icon: true,
            };
            this.$refs.toast && this.$refs.toast.show(params);

            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/style/thorui-extend.css";
.main {
  background: rgba(235, 239, 244, 1);
  height: calc(100vh - 155rpx);
  overflow: hidden;
  position: relative;
  padding-top: 155rpx;
}
.custom-navbar {
  position: fixed;
  top: 90rpx;
  left: 0;
  right: 0;
  z-index: 999;
}

.navbar-content {
  display: flex;
  align-items: center;
  height: 44px; /* 导航栏高度 */
  padding: 0 15px;
}

.back-btn {
  image {
    width: 48rpx;
    height: 48rpx;
  }
}

.title {
  flex: 1;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  text-align: center;
}
.mainBg {
  background-image: url("/static/images/newIndex/index_bg.png") !important;
  background-size: 100% 100%;
  width: 100%;
  height: 692rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.main-container {
  background: #fff;
  border-radius: 20rpx;
  padding: 36rpx 32rpx;
  width: calc(95% - 70rpx);
  margin: 44rpx auto 20rpx;
  position: relative;
  z-index: 1;
}

.inputCon {
  display: flex;
  align-items: center;
  gap: 30rpx;
  border-bottom: solid 1px rgba(245, 245, 245, 1);
  padding-bottom: 20rpx;
  margin-bottom: 25rpx;
  view {
    width: 220rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #8e8f9b;
  }
  input {
    flex: 1;
    border: none;
    text-align: right;
    font-weight: 400;
    font-size: 30rpx;
    color: #333333;
  }
  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.foot-ope {
  position: fixed;
  width: 100vw;
  bottom: 0;
  left: 0;
}
</style>
